<template>
    <div>
    <el-form inline class="demo-form-inline">
    <el-row>
        <el-col :span="5">
            <el-form-item label="仓库">
                <el-select v-model="query.payload.wareId" placeholder="请选择">
                    <el-option v-for="ware in wares" :label="ware.name" :value = "ware.id" />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="状态">
                <el-select v-model="query.payload.status" placeholder="请选择">
                    <el-option label="新建" :value = "0+''" />
                    <el-option label="已分配" :value = "1+''" />
                    <el-option label="正在采购" :value = "2+''" />
                    <el-option label="已完成" :value = "3+''" />
                    <el-option label="采购失败" :value = "4+''" />
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <el-row >
        <el-form-item label="创建时间">
            <el-date-picker
                    v-model="query.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="queryWmsPurchaseDetail">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <el-button type="success" @click="addWmsPurchaseDetail">新增</el-button>
            <el-dropdown style="margin-left: 15px">
                <el-button type="success">批量操作</el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item >
                            <el-popconfirm title="删除？" @confirm="batchDelete"  @cancel="">
                                <template #reference>
                                    <el-link type="danger" title="批量删除">
                                        批量删除
                                    </el-link>
                                </template>
                            </el-popconfirm>
                        </el-dropdown-item>
                        <el-dropdown-item divided @click="batchMerge">
                                        合并整单
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  :data="data.tableData"
              @selection-change="handleSelectionChange"
              header-cell-class-name="headerClass">
        <el-table-column type="selection" width="55" />
        <!--<el-table-column align="center" type="index"  label="序号" width="100px" />-->
        <el-table-column align="center" prop="purchaseId" label="采购单编号"  width="130"/>
        <el-table-column align="center" prop="skuId" label="商品id" />
        <el-table-column align="center" prop="skuNameTemp" label="商品名" width="350px" />
        <el-table-column align="center" prop="skuNum" label="采购数量"  width="100px"/>
        <el-table-column align="center" prop="skuPrice" label="采购金额"  width="100"/>
        <el-table-column align="center" prop="wareId" label="仓库id"  width="100px"/>
        <el-table-column align="center" prop="status" label="状态" >
            <template #default="scope">
                <el-tag effect="dark" v-if="scope.row.status===0">新建</el-tag>
                <el-tag effect="dark" type="info" v-else-if="scope.row.status===1">已分配</el-tag>
                <el-tag effect="dark" type="warning" v-else-if="scope.row.status===2">正在采购</el-tag>
                <el-tag effect="dark" type="success" v-else-if="scope.row.status===3">已完成</el-tag>
                <el-tag effect="dark" type="danger" v-else-if="scope.row.status===4">采购失败</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间" width="180px" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template #default="scope">
                <div v-if="scope.row.status===0||scope.row.status===1">
                    <el-link title="修改" type="primary" @click="editWmsPurchaseDetail(scope.row.id)" >
                        <el-icon :size="20">
                            <Edit />
                        </el-icon>
                        修改
                    </el-link>
                    &nbsp;
                    <el-popconfirm title="删除？" @confirm="deleteWmsPurchaseDetail(scope.row.id)"  @cancel="">
                        <template #reference>
                            <el-link type="danger" title="删除">
                                <el-icon :size="20">
                                    <Delete />
                                </el-icon>
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-table-column>
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryWmsPurchaseDetail"
        @current-change="queryWmsPurchaseDetail"
/>
<ModWmsPurchaseDetail @close="modWmsPurchaseDetail.isOpen = false"  @reload="queryWmsPurchaseDetail"
              ref="modWmsPurchaseDetail"
              :openType="transData.openType"
              :id="transData.id" />
<MergeWmsPurchaseDetail @close="mergeWmsPurchaseDetail.isOpen = false"  @reload="queryWmsPurchaseDetail"
              ref="mergeWmsPurchaseDetail"
              :detailInfo ="transData2.detailInfo "/>
</div>
</template>

<script setup>
    import ModWmsPurchaseDetail from '@/views/mall/wms/components/ModWmsPurchaseDetail.vue'
    import MergeWmsPurchaseDetail from '@/views/mall/wms/components/MergeWmsPurchaseDetail.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    let transData = reactive({})
    let transData2 = reactive({detailInfo:{}})
    let selections = ref([])
    let wares = ref([])
    let mergeWmsPurchaseDetail = ref(null)
    let modWmsPurchaseDetail = ref(null)
    let detailRows = ref([])
    let data = reactive({
        modRole:false,
        tableData:[],
        openType:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryWmsPurchaseDetail()
        request.post("/api/wmsWareInfo/getWmsWareInfoPage", {}).then(resp => {
            wares.value = resp.records
        })
    })
    function queryWmsPurchaseDetail(){
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        request.post("/api/wmsPurchaseDetail/getWmsPurchaseDetailPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
        query.payload.purchaseId = ""
        query.payload.skuId = ""
        query.payload.skuNum = ""
        query.payload.skuPrice = ""
        query.payload.wareId = ""
        query.payload.status = ""
        query.dateRange=[]
    }

    function addWmsPurchaseDetail(){
        transData.openType = "add"
        modWmsPurchaseDetail.value.isOpen = true
    }

    function deleteWmsPurchaseDetail(id){
        request.get(`/api/wmsPurchaseDetail/delete/${id}`).then(resp => {
            queryWmsPurchaseDetail()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }

    function editWmsPurchaseDetail(id){
        transData.id = id
        transData.openType = "edit"
        modWmsPurchaseDetail.value.isOpen = true
    }
    const handleSelectionChange = (rows) => {
        detailRows.value.length=0
        rows.forEach(row =>{
            detailRows.value.push(row);
        })
    }
    const batchDelete = ()=>{

    }
    const batchMerge = ()=>{
        if(detailRows.value.length===0){
            ElMessage({message: '选择采购需求！',type: 'error'})
            return
        }
        let map = new Map();
        let wareId = null
        detailRows.value.forEach(e=>{
            map.set(e.wareId, e.wareId)
            wareId = e.wareId
        })
        if(map.size > 1){
            ElMessage({message: '只能选择同一仓库采购需求合并！',type: 'error'})
            return
        }
        let info = {detailIds:detailRows.value.map(e=>{return e.id}), wareId: wareId}
        transData2.detailInfo = info
        mergeWmsPurchaseDetail.value.isOpen = true
    }
</script>
<style lang="css">

</style>


